<template>
	<view class="personal">
		<!-- 自定义导航栏 -->
		<view class="nav-container" :style="{height: navHeight + 'px', paddingTop: navTop + 'px'}">个人中心</view>
		<div class="main-container" :style="{marginTop: navHeight + navTop+'px'}">
			<view class="info">
				<view class="header">
					<view class="left">
						<view class="username" @click="loginClick">{{userInfo.userName ?? '点击登录 / 注册'}}</view>
						<view class="integral">我的积分: {{myIntegral }}</view>
					</view>
					<view class="right">
						<image class="img" :src="userInfo.headPortrait ?? '../../static/1f6b11dbc607ddce.jpg'" mode="widthFix">
						</image>
					</view>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="top">
							<image class="icon" src="../../static/personal/info_vip.png"></image>
							<text class="text">vip会员 </text>
						</view>
						<view class="last">{{personStore.vip ? '' : '未开通'}}</view>
					</view>
					<view class="right" @click="openVipClick">
						<view class="text">{{personStore.vip ? '立即续费' : '立即开通'}}</view>
						<image class="icon" src="../../static/personal/info_right.png"></image>
					</view>
				</view>
			</view>
			<!-- 我的、活动、设置 -->
			<view class="content">
				<CardList title="我的" :list="myList" />
				<CardList title="其他" :list="actList" />
				<!-- <CardList title="设置" :list="settingList" /> -->
			</view>
		</div>

	</view>
</template>

<script setup>
	import {
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		storeToRefs
	} from 'pinia'
	import {
		reqLogin
	} from '@/service/modules/login.js'
	import {
		useLoginStore
	} from "@/store/modules/login";
	import useMenuButton from "@/hook/use-menu-button";
	import my_collect from '@/static/personal/my_collect.png'
	import my_mistakes from '@/static/personal/my_mistakes.png'
	import my_record from '@/static/personal/my_record.png'
	import my_message from '@/static/tabbar/messageSelected.png'
	import act_sign_in from '@/static/personal/my_sign_in.png'
	import act_shop from '@/static/personal/act_integral_shop.png'
	import act_lottery from '@/static/personal/act_lottery.png'
	import act_invite from '@/static/personal/act_invite.png'
	import act_coupon from '@/static/personal/act_coupon.png'
	import set_personal from '@/static/personal/set_personal_info.png'
	import set_setting from '@/static/personal/set_setting.png'
	import set_about from '@/static/personal/set_about.png'
	import set_logout from '@/static/personal/set_logout.png'
	import CardList from './cpns/card-list/card-list.vue'
	import {
		getDuihuanliebiao,
		getShangpin,
		getTask,
		reqDuihuan,
		reqQiandao
	} from '../../service/modules/personal';
	import {
		usePersonalStore
	} from '../../store';

	// 静态数据
	const myList = [{
		text: '我的收藏',
		icon: my_collect,
		path: '/pages/collect-or-wrong/collect-or-wrong?flag=0'
	}, {
		text: '我的错题',
		icon: my_mistakes,
		path: '/pages/collect-or-wrong/collect-or-wrong?flag=1'
	}, {
		text: '考试记录',
		icon: my_record,
		path: '/pages/exam-list/exam-list'
	}, {
		text: '用户反馈',
		icon: my_message,
		path: '/pages/fallback-list/fallback-list'
	}, ]
	const actList = [{
		text: '积分商城',
		icon: act_shop,
		path: '/pages/shop/shop'
	}, {
		text: '签到打卡',
		icon: act_sign_in
	}, {
		text: '个人设置',
		icon: set_personal,
		path: '/pages/user-detail/user-detail'
	}, {
		text: '退出登录',
		icon: set_logout
	}]


	// // 获取胶囊高度、上外边距
	// const menuButtonInfo = getApp().globalData.menuButtonInfo
	// const navHeight = ref(menuButtonInfo.height)
	// const navTop = ref(menuButtonInfo.top)
	const [navHeight, navTop] = useMenuButton()

	// 获取仓库数据
	const loginStore = useLoginStore()
	const {
		userInfo,
	} = storeToRefs(loginStore)
	const personStore = usePersonalStore()
	const {
		myIntegral,
	} = storeToRefs(personStore)

	// 登录
	const loginClick = () => {
		// 如果已经登录那么点击不做任何操作
		if (userInfo.value.userName) return

		uni.login({
			provider: 'weixin',
			success: function(info) {
				const code = info.code
				// 上面拿到code去给后端发请求拿到token
				loginStore.loginAction(code)
			}
		});
	}

	// 查看积分
	// const checkIntegralClick = () => {
	// 	uni.navigateTo({
	// 		url: "/pages/personal/integral-detail/integral-detail"
	// 	})
	// }

	const openVipClick = () => {
		uni.navigateTo({
			url: '/pages/open-vip/open-vip'
		})
	}

	onMounted(() => {
		// 获取积分
		personStore.getMyIntegralAction()

		getTask().then(res => {
			console.log(res, '每日任务');
		})
		reqQiandao().then(res => {
			console.log(res, '签到');
		})
		getDuihuanliebiao().then(res => {
			console.log(res, '兑换列表');
		})
		reqDuihuan({
			userId: 1,
			convertNum: 1,
			shopId: 5,
		}).then(res => {
			console.log('兑换', res);
		})
	})
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}

	.personal {
		.nav-container {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			color: $primary-color;
			position: fixed;
			width: 100vw;
			left: 0;
			top: 0;
			z-index: 99;
			background-color: $bg-color;
		}

		.main-container {
			padding: 40rpx;

			.info {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						.username {
							font-size: 36rpx;
							color: $primary-color;
							margin-bottom: 14rpx;
						}

						.integral {
							font-size: 30rpx;
						}

					}

					.right {
						.img {
							width: 140rpx;
							height: 140rpx;
							border-radius: 50%;
						}
					}


				}

				.bottom {
					background-color: $primary-color;
					border-radius: 35rpx;
					padding: 10rpx 20rpx;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.left {

						.top {
							display: flex;
							align-items: center;

							.text {
								margin-left: 10rpx;
								color: #fff;
							}

							.icon {
								width: 50rpx;
								height: 50rpx;
							}
						}


						.last {
							text-align: center;
							margin-top: 10rpx;
							color: #9a9ba2;
							font-size: 26rpx;
						}
					}

					.right {
						display: flex;
						align-items: center;

						.text {
							color: #ffc53c;
							margin-right: 6rpx;
							font-size: 30rpx;
						}

						.icon {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}

			.content {
				// background-color: green;
			}
		}

	}
</style>